<template>
  <div @click="select" class="el-option" :class="{'active': selectActive === value}">
    {{label}}
  </div>
</template>

<script>
import emitter from './../el-form/form-bus.js'
export default {
  mixins: [emitter],
  componentName: 'elOption',
  name: 'elOption',
  props: {
    value: String,
    label: String
  },
  inject: ['elSelect'],
  computed: {
    selectActive () {
      return this.elSelect.value
    }
  },
  methods: {
    select () {
      this.dispatch('elSelect', 'select', this.value)
    }
  }
}
</script>

<style>
.active{
  background: #e1e1e1;
}
.el-option:hover{
  background: #e1e1e1;
}
</style>